<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    background-color="#2f81f1"
    text-color="#ffffff"
    active-text-color="#FFAE00"
    class="el-menu-demo"
  >
    <div class="logg" id="step1">
      <a href="/">
        <img
          width="115"
          src="http://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/home/image/loginpic/login-logo.png"
          alt="BV"
        />
      </a>
    </div>
    <el-menu-item id="step2" index="我的课堂" class="brand brand2">
      <a target="_blank" class="stretched-link" href="/home.html/#/myclass">我的课堂</a>
    </el-menu-item>
    <el-menu-item id="step7" index="精品课堂" class="brand brand2">
      <a target="_blank" class="stretched-link" href="/home.html/#/allclass">精品课堂</a>
    </el-menu-item>
    <el-menu-item index="软件下载" id="step12" class="brand brand2">
      <a target="_blank" class="stretched-link" href="/home.html/#/secure/download">软件下载</a>
    </el-menu-item>
    <el-menu-item index="forum" class="brand brand2">
      <a target="_blank" class="stretched-link" href="/forum.html">学习论坛</a>
    </el-menu-item>
    <el-submenu index="2" popper-class="ffaa" class="brand brand2">
      <template slot="title">
        <a class="begin stretched-link">开始编程</a>
      </template>
      <el-menu-item index="2-1">
        <a
          class="chead Scratchul"
          href="https://cdn.hterobot.com/scratch/index.html"
          target="_blank"
        >Scratch</a>
      </el-menu-item>
    </el-submenu>
    <el-menu-item
      index="3"
      @click="$router.push({name:'setup'})"
      v-if="user"
      popper-class="ffaa"
      class="brand brand2"
      id="step5"
    >
      <el-tooltip placement="bottom-end">
        <span class="cursor" slot="content">
          <span class="cursors" @click="$router.push('/logout')">
            <i class="iconfont icon-tuichu"></i>&nbsp;&nbsp; 退出
          </span>
        </span>
        <el-avatar :size="45" :src="user.headimg" @error="errorHandler"></el-avatar>
      </el-tooltip>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeIndex: "allclass"
    };
  },
  props: ["guide"],
  computed: mapState(["user"]),
  mounted() {
    this.activeIndex = this.$route.name;
    console.log(this.activeIndex);
  },
  watch: {
    $route(v) {
      this.activeIndex = v.name;
      // console.log(v);
    }
  },
  methods: {
    logout() {
      this.$router.push("/logout");
    },
    errorHandler() {
      return "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
    }
  }
};
</script>



<style scope="scope">
#headers {
  background-color: #fff !important;
  /* width:100%; */
  height: 76px !important;
  background-image: url(http://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/home/image/classroompic/header-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#headers ul {
  height: 76px;
  background-color: rgba(0, 0, 0, 0) !important;
  border-bottom: 0px;
}
#headers ul li:nth-of-type(1) {
  margin-left: 33px;
}
#headers ul li {
  background-color: rgba(0, 0, 0, 0) !important;
  padding: 0 3%;
}
#headers ul li:hover a {
  color: #ffae00;
}
#headers ul div:hover .begin,
#headers ul div:hover i {
  color: #ffae00;
}
#headers ul li div {
  background-color: rgba(0, 0, 0, 0) !important;
  padding: 0;
}
#headers ul #last_li {
  padding-right: 97px;
}
#app .el-submenu__title i {
  color: #fff;
}
/* logo */
#app .logg a img {
  width: 175px;
  height: 41px;
}
#app .gauge div {
  height: 76px;
}
.cursors {
  float: right;
}

.logg {
  float: left;
  line-height: 51px;
  padding: 12px;
}

.chead {
  color: #ffffff;
}
.rounded-circle {
  margin-bottom: 10px;
  margin-right: 15px;
}
#app .gauge div a img {
  margin-top: 18px;
}

/*以下改动*/

.gauge {
  margin-right: 39px;
  height: 75px;
  line-height: 75px;
  font-size: 18px;
}
.same {
  line-height: 29px;
}
.Scratchul {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.cursor {
  cursor: pointer;
  font-size: 16px;
}
#headers .el-menu-demo {
  margin: 0 auto;
  width: 1000px;
}
#headers .stretched-link {
  font-size: 14px;
}
</style>
